<template>
	<view class="review-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left">
				<text class="review-count">评论 {{ commentCount }}</text>
				<!-- <text class="header-tab">相关</text> -->
			</view>
			<view class="header-right">
				<!-- <view class="author-filter">
					<checkbox :checked="onlyShowAuthor" @change="toggleAuthorFilter" />
					<text class="filter-text">只看作者</text>
				</view> -->
				<!-- <view class="sort-button">
					<text class="iconfont icon-sort"></text>
					<text class="sort-text">最新</text>
				</view> -->
			</view>
		</view>

		<!-- 评论列表 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="review-list">
				<!-- 顶级评论 -->
				<view class="review-item" v-for="(item, index) in reviewList" :key="index">
					<!-- 主评论 -->
					<view class="user-info">
						<view class="user-avatar">
							<image src="../image/avatar.png" mode="aspectFill"></image>
						</view>
						<view class="user-detail">
							<view class="user-name-wrapper">
								<text class="user-name">{{ item.username }}</text>
								<text v-if="item.isAuthor" class="author-tag">作者</text>
							</view>
						</view>
					</view>
					<view class="review-text">
						<text>{{ item.content }}</text>
					</view>
					<view class="review-images" v-if="item.images && item.images.length > 0">
						<view class="image-item" v-for="(img, imgIndex) in item.images" :key="imgIndex">
							<image :src="img" mode="aspectFill"></image>
						</view>
					</view>
					<view class="review-meta">
						<view class="review-floor">
							<text class="floor-text">{{ item.specs }}</text>
							<text class="review-date">{{ item.date }}</text>
							<text v-if="item.reply_count > 0" class="reply-count">{{ item.reply_count }}条回复</text>
						</view>
						<view class="review-actions">
							<view class="reply-button" @click="showReplyInput(index)">
								<text class="action-text">回复</text>
							</view>
						</view>
					</view>

					<!-- 回复评论列表 -->
					<view class="reply-list" v-if="item.replies && item.replies.length > 0">
						<view class="reply-item" v-for="(reply, replyIndex) in item.replies" :key="replyIndex">
							<view class="user-info">
								<view class="user-avatar">
									<image src="../image/avatar.png" mode="aspectFill"></image>
								</view>
								<view class="user-detail">
									<view class="user-name-wrapper">
										<text class="user-name">{{ reply.username }}</text>
										<text v-if="reply.isAuthor" class="author-tag">作者</text>
									</view>
								</view>
							</view>
							<view class="review-text">
								<text v-if="reply.replyTo">回复 <text
										class="reply-to-name">@{{ reply.replyTo }}</text>:{{ reply.content }}</text>
								<text v-else>{{ reply.content }}</text>
							</view>
							<view class="review-images" v-if="reply.images && reply.images.length > 0">
								<view class="image-item" v-for="(img, imgIndex) in reply.images" :key="imgIndex">
									<image :src="img" mode="aspectFill"></image>
								</view>
							</view>
							<view class="review-meta">
								<view class="review-floor">
									<text
										class="review-date">{{ reply.create_time ? formatDate(reply.create_time) : reply.date }}</text>
								</view>
								<view class="review-actions">
									<view class="reply-button" @click="showReplyInput(index, replyIndex)">
										<text class="action-text">回复</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 回复输入框 (仅在当前评论被选中时显示) -->
					<view class="reply-input-wrapper" v-if="replyingTo.parentIndex === index">
						<input class="reply-input" v-model="replyContent"
							:placeholder="replyingTo.childIndex !== null ? `回复 @${getReplyUsername(index, replyingTo.childIndex)}` : '回复评论'"
							focus confirm-type="send" @confirm="addReply" />
						<view class="reply-input-actions">
							<button class="cancel-btn" @click="cancelReply">取消</button>
							<button class="send-btn" @click="addReply">发送</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-container" v-if="loading">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
		</scroll-view>

		<!-- 底部评论栏 -->
		<view class="bottom-action-bar">
			<view class="comment-input-wrapper" @click="showCommentPopup">
				<view class="comment-input-placeholder">
					<text>来说几句...</text>
				</view>
			</view>
			<view class="action-buttons">
				<view class="action-button" @click="toggleLike">
					<text class="iconfont" :class="isLiked ? 'icon-dianzan1' : 'icon-dianzan'"></text>
					<text>{{ likeCount }}</text>
				</view>
				<view class="action-button" @click="toggleFavorite">
					<text class="iconfont" :class="isFavorited ? 'icon-shoucang' : 'icon-wujiaoxing'"></text>
					<text>收藏</text>
				</view>
				<view class="action-button">
					<text class="iconfont icon-31daipingjia"></text>
					<text>{{ commentCount }}</text>
				</view>
			</view>
		</view>

		<!-- 评论输入弹出层 -->
		<u-popup v-model="showCommentLayer" mode="bottom" :closeable="false" :border-radius="26"
			:safe-area-inset-bottom="false">
			<view class="comment-popup">
				<view class="comment-input-area">
					<input type="text" class="comment-popup-input" v-model="newComment" placeholder="来说几句..." focus
						confirm-type="send" @confirm="addComment" ref="commentPopupInput" />
					<view class="input-action-btn">
						<button class="send-btn" @click="addComment">发送</button>
					</view>
				</view>

				<!-- 表情选择器 -->
				<view class="emoji-selector-popup" v-if="showEmojiPicker">
					<view class="emoji-list">
						<view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index"
							@click="selectEmoji(emoji)">
							{{ emoji }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		name: 'ReviewPage',
		data() {
			return {
				// 当前选中的评价标签
				activeTag: 'all',
				// 新评论内容
				newComment: '',
				// 回复内容
				replyContent: '',
				// 正在回复的评论索引
				replyingTo: {
					parentIndex: null,
					childIndex: null
				},
				// 点赞数量
				likeCount: 7,
				// 评论数量
				commentCount: 0,
				// 是否已点赞
				isLiked: false,
				// 是否已收藏
				isFavorited: false,
				// 是否显示表情选择器
				showEmojiPicker: false,
				// 表情列表
				emojiList: ['😊', '😂', '😍', '👍', '❤️', '🎉', '🔥', '👏', '🙏', '💪', '🌟', '💯'],
				// 是否只看作者
				onlyShowAuthor: false,
				// 评价列表数据
				reviewList: [],
				showCommentLayer: false,
				goodsId: undefined,
				// 加载状态
				loading: false
			}
		},
		created() {
			// 可以在这里获取评价数据
		},
		onLoad(option) {
			this.goodsId = option.goodsId
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 获取用户名 - 优先使用reply_nick_name，没有则显示"未知用户"
			getUserDisplayName(item) {
				if (item.reply_nick_name && item.reply_nick_name.trim()) {
					return item.reply_nick_name;
				}
				return '未知用户';
			},

			// 获取回复用户名
			getReplyUsername(parentIndex, childIndex) {
				const reply = this.reviewList[parentIndex].replies[childIndex];
				return this.getUserDisplayName(reply);
			},

			// 获取评价数据
			getData() {
				this.loading = true;
				GoodsApi.getdata(this.goodsId)
					.then(result => {
						console.log('API返回数据:', result);
						if (result.status === 200 && result.data) {
							// 处理API返回的数据
							this.processApiData(result.data);
						}
					})
					.catch(error => {
						console.error('获取评论失败:', error);
					})
					.finally(() => {
						this.loading = false;
					});
			},

			// 处理API数据
			processApiData(data) {
				if (!data || !data.list) return;

				// 设置评论总数
				this.commentCount = data.total || data.list.length;

				// 找出所有顶级评论（parent_comment_id为0或null的）
				const topLevelComments = data.list.filter(comment =>
					comment.parent_comment_id === 0 ||
					comment.parent_comment_id === null ||
					comment.parent_comment_id === undefined
				);

				console.log('顶级评论数量:', topLevelComments.length);

				// 创建一个评论ID到用户名的映射，用于后续查找回复对象
				const commentIdToUsername = {};
				data.list.forEach(comment => {
					commentIdToUsername[comment.comment_id] = this.getUserDisplayName(comment);
				});

				// 格式化顶级评论
				const formattedComments = topLevelComments.map(comment => {
					// 将当前评论的用户名添加到映射中
					commentIdToUsername[comment.comment_id] = this.getUserDisplayName(comment);

					// 格式化回复
					let formattedReplies = [];

					// 如果API直接返回了replies数组，使用它
					if (comment.replies && comment.replies.length > 0) {
						formattedReplies = comment.replies.map(reply => {
							// 将回复的用户名添加到映射中
							commentIdToUsername[reply.comment_id] = this.getUserDisplayName(reply);

							// 确定回复对象
							let replyToUsername = null;
							if (reply.reply_to_comment_id) {
								// 如果API提供了reply_to_comment_id字段，使用它来查找回复对象
								replyToUsername = commentIdToUsername[reply.reply_to_comment_id] || '未知用户';
							} else if (reply.reply_to_user_id) {
								// 如果API提供了reply_to_user_id字段，使用它来构建回复对象
								replyToUsername = '未知用户';
							} else if (reply.parent_comment_id) {
								// 如果只有parent_comment_id字段，假设回复的是父评论
								replyToUsername = commentIdToUsername[reply.parent_comment_id] || '未知用户';
							}

							return {
								...reply,
								username: this.getUserDisplayName(reply), // 使用新的用户名获取方法
								date: this.formatDate(reply.create_time),
								isLiked: false,
								isAuthor: false,
								replyTo: replyToUsername
							};
						});
					}

					return {
						...comment,
						username: this.getUserDisplayName(comment), // 使用新的用户名获取方法
						date: this.formatDate(comment.create_time),
						specs: `${comment.comment_id}楼`,
						likes: 0,
						isLiked: false,
						isAuthor: false,
						replies: formattedReplies,
						// 保留原始数据
						comment_id: comment.comment_id,
						user_id: comment.user_id,
						parent_comment_id: comment.comment_id,
						path: comment.path,
						reply_count: comment.reply_count || formattedReplies.length
					};
				});

				console.log('格式化后的评论列表:', formattedComments);
				this.reviewList = formattedComments;
			},

			// 根据用户ID获取用户名
			getUserName(userId, commentId) {
				// 如果提供了commentId，使用它作为用户名
				if (commentId) {
					return `${commentId}`;
				}
				// 否则使用userId
				return `${userId}`;
			},

			// 格式化API时间戳
			formatDate(dateString) {
				if (!dateString) return '';

				const date = new Date(dateString);
				const now = new Date();
				const yesterday = new Date(now);
				yesterday.setDate(yesterday.getDate() - 1);

				// 检查日期是否为今天
				if (date.toDateString() === now.toDateString()) {
					return `今天 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
				}

				// 检查日期是否为昨天
				if (date.toDateString() === yesterday.toDateString()) {
					return `昨天 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
				}

				// 否则返回MM-DD格式的日期
				return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
			},

			// 切换评价标签
			changeTag(tag) {
				this.activeTag = tag
				// 可以在这里根据标签筛选评价列表
			},

			// 显示表情选择器
			showEmojiSelector() {
				this.showEmojiPicker = !this.showEmojiPicker
			},

			// 选择表情
			selectEmoji(emoji) {
				this.newComment += emoji
			},

			// 添加评论 (底部弹出层的评论输入，作为父评论)
			addComment() {
				if (!this.newComment.trim()) return;

				// 获取当前时间
				const now = new Date();
				let hours = now.getHours();
				let minutes = now.getMinutes();
				minutes = minutes < 10 ? '0' + minutes : minutes;
				let timeStr = `${hours}:${minutes}`;

				// 创建API请求数据 - 确保parent_comment_id为0，表示这是顶级评论
				const apiData = {
					user_id: 12345,
					post_id: this.goodsId,
					content: this.newComment,
					// parent_comment_id: 0 // 顶级评论
				};

				// 发送到API
				GoodsApi.consultingData(apiData)
					.then(result => {
						console.log('评论添加成功:', result);
						// 添加成功后刷新评论列表
						this.getData();
					})
					.catch(error => {
						console.error('评论添加失败:', error);

						// 即使API失败，也进行乐观UI更新
						// 创建新评论对象
						const tempCommentId = Date.now(); // 使用时间戳作为临时ID
						const newCommentObj = {
							username: '未知用户', // 新评论默认显示未知用户
							avatar: '../image/avatar.png',
							date: `今天 ${timeStr}`,
							content: this.newComment,
							images: [],
							specs: `新评论`,
							likes: 0,
							isLiked: false,
							isAuthor: false,
							replies: [],
							user_id: 12345,
							comment_id: tempCommentId,
							parent_comment_id: 0,
							reply_count: 0,
							reply_nick_name: '' // 空的昵称字段
						};

						// 添加到评论列表开头
						this.reviewList.unshift(newCommentObj);

						// 更新评论总数
						this.commentCount++;
					});

				// 清空输入框
				this.newComment = '';

				// 隐藏表情选择器和评论弹出层
				this.showEmojiPicker = false;
				this.showCommentLayer = false;
			},

			// 显示回复输入框
			showReplyInput(parentIndex, childIndex = null) {
				this.replyingTo = {
					parentIndex,
					childIndex
				};
				this.replyContent = '';
			},

			// 取消回复
			cancelReply() {
				this.replyingTo = {
					parentIndex: null,
					childIndex: null
				};
				this.replyContent = '';
			},

			// 添加回复
			addReply() {
				if (!this.replyContent.trim()) return;

				// 获取当前时间
				const now = new Date();
				let hours = now.getHours();
				let minutes = now.getMinutes();
				minutes = minutes < 10 ? '0' + minutes : minutes;
				let timeStr = `${hours}:${minutes}`;

				// 确定回复对象
				const parentComment = this.reviewList[this.replyingTo.parentIndex];
				let replyToUsername = parentComment.username;
				console.log(this.reviewList,'reviewList')
				console.log([this.replyingTo.parentIndex],'[this.replyingTo.parentIndex]0=-0=-')
				let replyToUserId = parentComment.user_id;
				let parent_comment_id = parentComment.comment_id;
				let replyToCommentId = null;

				if (this.replyingTo.childIndex !== null) {
					// 如果是回复子评论，则使用子评论的用户名和用户ID
					const replyComment = parentComment.replies[this.replyingTo.childIndex];
					replyToUsername = replyComment.username || '未知用户';
					replyToUserId = replyComment.user_id;
					replyToCommentId = replyComment.comment_id;
					// 注意：即使回复的是子评论，parent_comment_id仍然是顶级评论的ID
				}

				// 创建API请求数据
				const apiData = {
					user_id: 2,
					post_id: this.goodsId,
					content: this.replyContent,
					parent_comment_id: parent_comment_id,
					reply_to_user_id: replyToUserId, // 可选，如果API支持的话
					reply_to_comment_id: replyToCommentId // 可选，如果API支持的话，记录回复的是哪条评论
				};

				// 发送到API
				GoodsApi.consultingData(apiData)
					.then(result => {
						console.log('回复添加成功:', result);
						// 添加成功后刷新评论列表
						this.getData();
					})
					.catch(error => {
						console.error('回复添加失败:', error);

						// 即使API失败，也进行乐观UI更新
						// 创建新回复对象
						const tempReplyId = Date.now(); // 使用时间戳作为临时ID
						const newReplyObj = {
							username: '未知用户', // 新回复默认显示未知用户
							avatar: '../image/avatar.png',
							date: `今天 ${timeStr}`,
							content: this.replyContent,
							images: [],
							likes: 0,
							isLiked: false,
							isAuthor: false,
							replyTo: replyToUsername, // 这里使用正确的回复对象用户名
							user_id: 12345,
							comment_id: tempReplyId,
							reply_nick_name: '' // 空的昵称字段
						};

						// 添加到回复列表
						parentComment.replies.push(newReplyObj);

						// 更新回复数量
						parentComment.reply_count = (parentComment.reply_count || 0) + 1;

						// 更新评论总数
						this.commentCount++;
					});

				// 清空输入框并重置回复状态
				this.replyContent = '';
				this.replyingTo = {
					parentIndex: null,
					childIndex: null
				};
			},

			// 切换点赞状态
			toggleLike() {
				this.isLiked = !this.isLiked;
				if (this.isLiked) {
					this.likeCount++;
				} else {
					this.likeCount--;
				}
			},

			// 切换收藏状态
			toggleFavorite() {
				this.isFavorited = !this.isFavorited;
			},

			// 显示评论输入弹出层
			showCommentPopup() {
				this.showCommentLayer = true;
				// 重置表情选择器状态
				this.showEmojiPicker = false;
			},

			// 切换只看作者筛选
			toggleAuthorFilter(e) {
				this.onlyShowAuthor = e.detail.value;
				// 这里可以添加筛选逻辑
			},

			// 点赞评论
			likeComment(index) {
				const comment = this.reviewList[index];
				comment.isLiked = !comment.isLiked;

				if (comment.isLiked) {
					comment.likes = (comment.likes || 0) + 1;
				} else if (comment.likes > 0) {
					comment.likes--;
				}
			},

			// 点赞回复
			likeReply(parentIndex, childIndex) {
				const reply = this.reviewList[parentIndex].replies[childIndex];
				reply.isLiked = !reply.isLiked;

				if (reply.isLiked) {
					reply.likes = (reply.likes || 0) + 1;
				} else if (reply.likes > 0) {
					reply.likes--;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.review-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	/* 页面头部 */
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.review-count {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 30rpx;
	}

	.header-tab {
		font-size: 28rpx;
		color: #999;
	}

	.header-right {
		display: flex;
		align-items: center;
	}

	.author-filter {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.filter-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 6rpx;
	}

	.sort-button {
		display: flex;
		align-items: center;
	}

	.sort-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 6rpx;
	}

	/* 评论列表 */
	.content-scroll {
		flex: 1;
		overflow: hidden;
		/* Add padding at the bottom to prevent content from being hidden behind the fixed bar */
		padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}

	.review-list {
		padding: 0 24rpx;
	}

	.review-item {
		padding: 24rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.user-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 16rpx;
		background-color: #f5f5f5;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.user-detail {
		flex: 1;
	}

	.user-name-wrapper {
		display: flex;
		align-items: center;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.author-tag {
		font-size: 22rpx;
		color: #ff8f1f;
		background-color: #fff8e6;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-left: 10rpx;
	}

	.review-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.reply-to-name {
		color: #ff8f1f;
		font-weight: 500;
	}

	.review-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 16rpx;
	}

	.image-item {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.image-item image {
		width: 100%;
		height: 100%;
	}

	.review-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.review-floor {
		display: flex;
		align-items: center;
	}

	.floor-text {
		margin-right: 10rpx;
	}

	.reply-count {
		margin-left: 10rpx;
		color: #ff8f1f;
	}

	.review-date {
		margin-right: 10rpx;
	}

	.review-actions {
		display: flex;
		align-items: center;
	}

	.reply-button {
		margin-right: 20rpx;
	}

	.action-text {
		color: #999;
	}

	.like-button {
		display: flex;
		align-items: center;
	}

	.like-count {
		margin-left: 4rpx;
	}

	/* 回复列表样式 */
	.reply-list {
		margin-top: 16rpx;
		margin-left: 60rpx;
		/* 缩进，使回复看起来是嵌套的 */
		// border-left: 4rpx solid #f5f5f5;
		/* 左侧添加一条竖线 */
		padding-left: 20rpx;
	}

	.reply-item {
		padding: 16rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.reply-item:last-child {
		border-bottom: none;
	}

	/* 回复输入框样式 */
	.reply-input-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
		margin-left: 60rpx;
		padding: 16rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.reply-input {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}

	.reply-input-actions {
		display: flex;
		justify-content: flex-end;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		border: none;
		min-width: 80rpx;
		text-align: center;
		margin-right: 16rpx;
	}

	.send-btn {
		background-color: #ff8f1f;
		color: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		border: none;
		min-width: 80rpx;
		text-align: center;
	}

	/* 底部操作栏 */
	.bottom-action-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 24rpx;
		border-top: 1px solid #f0f0f0;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		/* Add safe area inset for iOS devices with notches */
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.comment-input-wrapper {
		width: 55%;
	}

	.comment-input-placeholder {
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: #999;
	}

	.action-buttons {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 45%;
	}

	.action-button {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}

	.action-button .iconfont {
		margin-right: 6rpx;
		font-size: 36rpx;
	}

	/* 评论弹出层 */
	.comment-popup {
		padding: 20rpx;
		position: relative;
		background-color: #fff;
	}

	.comment-input-area {
		display: flex;
		align-items: center;
		position: relative;
		padding: 10rpx 0;
	}

	.comment-popup-input {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		height: 60rpx;
		padding-right: 80rpx;
	}

	.input-action-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 表情选择器 */
	.emoji-selector-popup {
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1px solid #eee;
		padding: 20rpx 0;
	}

	.emoji-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.emoji-item {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		margin: 10rpx;
		cursor: pointer;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}

	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #ff8f1f;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 10rpx;
	}

	.loading-text {
		font-size: 24rpx;
		color: #999;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 图标样式 */
	@font-face {
		font-family: 'iconfont';
		src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-dianzan:before {
		content: '\e8ad';
	}

	.icon-dianzan1:before {
		content: "\e8c3";
	}

	.icon-shoucang:before {
		content: "\e647";
	}

	.icon-wujiaoxing:before {
		content: "\e6b3";
	}

	.icon-comment:before {
		content: '\e667';
	}

	.icon-sort:before {
		content: '\e666';
	}
</style>